<template>
  <div class="agent-page">
    <header class="agent-info">
      <button class="back-button" @click="goBack"><</button>
      <h1>{{ agentInfo.name }}</h1>
      <p>我的佣金：{{ agentInfo.commission }}元</p>
      <div class="buttons">
        <button @click="showCommissionDetails">佣金明细</button>
        <button @click="withdrawCommission">立即提现</button>
      </div>
    </header>

    <nav class="tab-nav">
      <button
          v-for="(tab, index) in tabs"
          :key="index"
          :class="{ active: index === activeTab }"
          @click="handleTabClick(tab, index)"
      >
        {{ tab }}
      </button>
    </nav>


    <section class="user-list">
      <ul v-if="activeTab === 0">
        <li v-for="user in filteredUsers('一级用户')" :key="user.name" @click="showUserDetails(user)">
          <img :src="user.avatar" alt=""/>
          <span>{{ user.name }}</span>
        </li>
      </ul>
      <ul v-else-if="activeTab === 1">
        <li v-for="user in filteredUsers('二级用户')" :key="user.name" @click="showUserDetails(user)">
          <img :src="user.avatar" alt=""/>
          <span>{{ user.name }}</span>
        </li>
      </ul>
    </section>

    <!-- 用户详情对话框 -->
    <div v-if="selectedUser" class="user-details-overlay" @click="closeUserDetails">
      <div class="user-details-dialog" @click.stop>
        <button class="close-button" @click="closeUserDetails">X</button>
        <h2>{{ selectedUser.name }}</h2>
        <img :src="selectedUser.avatar" alt="" class="avatar"/>
        <p><strong>Level:</strong> {{ selectedUser.level }}</p>
        <!-- 可以根据需要添加更多信息 -->
      </div>
    </div>
    <div class="agent-page">
      <footer class="actions">
        <button @click="puthtongji">数据统计</button>
        <button>邀请好友</button>
      </footer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      agentInfo: {
        name: '我是代理',
        commission: 0.00,
      },
      users: [
        {
          level: '一级用户',
          avatar: 'https://example.com/avatar1.jpg',
          name: '爱吃猫的咸鱼',
        },
        {
          level: '二级用户',
          avatar: 'https://example.com/avatar2.jpg',
          name: '喜欢狗的小白',
        },
        // 其他用户数据...
      ],
      tabs: ['一级用户', '二级用户'],
      activeTab: 0,
      selectedUser: null,
    };
  },
  computed: {
    // 移除了 filteredUsers 计算属性
  },
  methods: {
    showCommissionDetails() {
      // 实现显示佣金明细的方法
    },
    withdrawCommission() {
      // 实现提现的方法
    },
    setActiveTab(index) {
      this.activeTab = index;
    },
    handleTabClick(tab, index) {
      this.setActiveTab(index);
    },
    goBack() {
      // 实现回退逻辑，例如返回上一页或关闭当前页面
      window.history.back();
    },
    filteredUsers(level) {
      return this.users.filter(u => u.level === level);
    },
    showUserDetails(user) {
      this.selectedUser = user;
    },
    closeUserDetails() {
      this.selectedUser = null;
    },
    puthtongji(){
      this.$router.push('/tongji');
    }
  }
};
</script>

<style scoped>
.agent-page {
  display: flex;
  flex-direction: column;
  max-width: 800px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中页面 */
}

.agent-info {
  background-color: #a5d6a7;
  padding: 20px;
  color: white;
  text-align: center; /* 居中文本 */
  position: relative; /* 使子元素绝对定位生效 */
}
.agent-page {
  position: relative; /* 如果需要绝对定位 */
  min-height: 100vh; /* 确保页面有足够的高度 */
  display: flex;
  flex-direction: column;
}

.actions {
  position: fixed; /* 固定在页面底部 */
  bottom: 0;
  left: 50%; /* 水平居中 */
  transform: translateX(-50%);
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: white; /* 背景颜色可以根据需要调整 */
  padding: 10px 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
}

.actions button {
  margin: 0 10px; /* 按钮之间的间距 */
}
.back-button {
  position: absolute;
  left: 20px;
  top: 20px;
  background-color: transparent;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.back-button:hover {
  color: #4CAF50;
}

.agent-info h1 {
  margin-left: 60px; /* 为回退按钮留出空间 */
}

.buttons button {
  margin-right: 10px;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}

.buttons button:hover {
  background-color: #4CAF50;
  color: white;
}

.tab-nav button {
  background-color: transparent;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease; /* 添加过渡效果 */
}

.user-details-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.user-details-dialog {
  background: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  width: 90%;
  max-width: 400px;
}

.close-button {
  position: absolute;
  right: 10px;
  top: 10px;
  background: none;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.tab-nav button.active {
  background-color: #4CAF50;
  color: white;
}

.user-list ul {
  list-style-type: none;
  padding: 0;
}

.user-list li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  padding: 10px;
  border-bottom: 1px solid #ddd; /* 添加底部边框 */
}

.user-list img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  border-radius: 50%; /* 圆角图片 */
}

.actions button {
  margin-right: 10px;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease; /* 添加过渡效果 */
}

.actions button:hover {
  background-color: #4CAF50;
  color: white;
}
</style>
